<template>
  <div class="content" :class="`level${userInfo.supLevel}`">
    <van-swipe indicator-color="white">
      <van-swipe-item>
        <div class="container">
          <div class="content1">
            <img src="../images/logo.png" alt="">
            <div class="center">{{supName[userInfo.supLevel]}}</div>
            <div class="right">{{busName[userInfo.busLevel]}}</div>
          </div>
          <div class="content2">
            <div style="width: 70%; margin:10px auto">邀请客户办理业务</div>
            <van-progress
                style="width: 70%; margin:10px auto"
                pivot-text="16笔"
                color="#f2826a"
                :percentage="num"/>
            <div style="width: 70%; margin:10px auto">距离下一等级还差4笔</div>
          </div>
        </div>
      </van-swipe-item>


      <van-swipe-item>刷新显示2</van-swipe-item>
      <van-swipe-item>刷新显示3</van-swipe-item>
      <van-swipe-item>刷新显示4</van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props:['userInfo'],
  data(){
    return {
      supName:['青铜专员','白银经理','黄金经理','钻石主管','星耀总监'],
      busName:['推荐','引荐','指导'],
      num:140
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .content {
    height: 180px;
    width: 90%;
    border-radius: 10px;
  }
  .content.level0{
    background-color: #edcea4;
  }
  .content.level1{
    background-color: #d3dae2;
  }
  .content.level2{
    background-color: #e3bd8a;
  }
  .content.level3{
    background-color: #d0defc;
  }
  .content.level4{
    background-color: #c0a7f7;
  }
  .content1{
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .container{
    height: 180px;
  }
  .center{
    font-size: 18px;
    font-weight: bold;
  }
  .right {
    background-color: #51607f;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 50px;
    border-radius: 5px;
  }
  .content2{
    margin-top: 25px;
    font-size: 14px;
    width: 70%;
  }
</style>
